<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="box1">
    我是box1
    <span id="sp">
            我是sapn
        </span>

</div>
</body>
<style>
    #box1 {
        width: 200px;
        height: 200px;
        background-color: red;
    }

    #sp {
        background-color: yellowgreen;
    }
</style>

<script>
    window.onload = function () {

        /**
         * 事件冒泡
         *  - 事件冒泡：事件从最内层开始，向外层传播
         */
            // 给 span 绑定单击事件，点击span时，会先执行 span 的单击绑定函数，然后会执行 div 的单击绑定函数，最后会执行 body 的单击绑定函数
        var sp = document.getElementById("sp");
        sp.onclick = function () {
            alert("我是 span 的单击绑定函数")
        }

        // 给 box1 绑定单击事件，点击box1时，会先执行 div 的单击绑定函数，然后会执行 body 的单击绑定函数
        var box1 = document.getElementById("box1");
        box1.onclick = function () {
            alert("我是 div 的单击绑定函数")
        }

        // 给 body 绑定单击事件，点击body时，会先执行 body 的单击绑定函数
        var body = document.body
        body.onclick = function () {
            alert("我是 body 的单击绑定函数")
        }
    }
</script>
</html>
